import React, { useState, useCallback } from "react";
import { Button, Checkbox, Form, Input, Spin } from "antd";
import * as api from "../../api/login";
import "./index.css";
import { useNavigate } from "react-router-dom";
import type { Container, Engine } from "tsparticles-engine";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export const Login = () => {
  let [username, setUsername] = useState<string>("");
  let [password, setPassword] = useState<string>("");
  let [spinning, setSpinning] = useState(false);
  //编程式导航
  let navigate = useNavigate();

  let usernameonChange = (e: any) => {
    setUsername(e.target.value);
  };
  let passwordonChange = (e: any) => {
    setPassword(e.target.value);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  const particlesInit = useCallback(async (engine: Engine) => {
    console.log(engine);

    // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(
    async (container: Container | undefined) => {
      await console.log(container);
    },
    []
  );

  const onFinish = (values: any) => {
    console.log("Success:", values);
    // let { password, username } = values;
    // setPassword(values.password);
    // setUsername(values.username);
  };

  let Loginsystem = async () => {
    setSpinning(true);
    //   console.log(1);
    try {
      console.log(username, "username");
      console.log(password, "password");

      let res = await api.Login(username, password);
      console.log(res, "dengru");
      sessionStorage.setItem("token", res.data.token);
      if (res.data.state) {
        setSpinning(false);
        navigate("/");
      } else {
        console.log(res, "kkkk");
      }
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <>
      {/* <span>32324</span> */}
      <Spin spinning={spinning} className="yy">
        <div className="From-context" style={{ width: "500px" }}>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[{ required: true, message: "请填写用户名" }]}
            >
              <Input value={username} onChange={usernameonChange} />
            </Form.Item>

            <Form.Item
              label="Password"
              name="password"
              rules={[{ required: true, message: "请填写密码" }]}
            >
              <Input.Password value={password} onChange={passwordonChange} />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{ offset: 8, span: 16 }}
            >
              <Checkbox>Rememberme</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" onClick={Loginsystem} htmlType="submit">
                登入
              </Button>
            </Form.Item>
          </Form>
          <Particles
            id="app"
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
              autoPlay: true,
              background: {
                color: "rgb(254, 182, 146)",
                image:
                  "linear-gradient(25deg, #f34183, #f18f6f, #e7c952, #d2ff0c)",
                position: "50% 50%",
                repeat: "no-repeat",
                size: "cover",
                opacity: 1,
              },
              backgroundMask: {
                composite: "destination-out",
                cover: {
                  color: {
                    value: "#fff",
                  },
                  opacity: 1,
                },
                enable: false,
              },
              defaultThemes: {},
              delay: 0,
              fullScreen: {
                enable: true,
                zIndex: 1,
              },
              detectRetina: true,
              duration: 0,
              fpsLimit: 120,
              interactivity: {
                detectsOn: "window",
                events: {
                  onClick: {
                    enable: true,
                    mode: "push",
                  },
                  onDiv: {
                    selectors: "#repulse-div",
                    enable: false,
                    mode: "repulse",
                    type: "circle",
                  },
                  onHover: {
                    enable: true,
                    mode: "bubble",
                    parallax: {
                      enable: false,
                      force: 60,
                      smooth: 10,
                    },
                  },
                  resize: {
                    delay: 0.5,
                    enable: true,
                  },
                },
                modes: {
                  attract: {
                    distance: 200,
                    duration: 0.4,
                    easing: "ease-out-quad",
                    factor: 1,
                    maxSpeed: 50,
                    speed: 1,
                  },
                  bounce: {
                    distance: 200,
                  },
                  bubble: {
                    distance: 400,
                    duration: 2,
                    mix: false,
                    opacity: 0.8,
                    size: 40,
                    divs: {
                      distance: 200,
                      duration: 0.4,
                      mix: false,
                      selectors: [],
                    },
                  },
                  connect: {
                    distance: 80,
                    links: {
                      opacity: 0.5,
                    },
                    radius: 60,
                  },
                  grab: {
                    distance: 400,
                    links: {
                      blink: false,
                      consent: false,
                      opacity: 1,
                    },
                  },
                  push: {
                    default: true,
                    groups: [],
                    quantity: 4,
                  },
                  remove: {
                    quantity: 2,
                  },
                  repulse: {
                    distance: 200,
                    duration: 0.4,
                    factor: 100,
                    speed: 1,
                    maxSpeed: 50,
                    easing: "ease-out-quad",
                    divs: {
                      distance: 200,
                      duration: 0.4,
                      factor: 100,
                      speed: 1,
                      maxSpeed: 50,
                      easing: "ease-out-quad",
                      selectors: [],
                    },
                  },
                  slow: {
                    factor: 3,
                    radius: 200,
                  },
                  trail: {
                    delay: 1,
                    pauseOnStop: false,
                    quantity: 1,
                  },
                  light: {
                    area: {
                      gradient: {
                        start: {
                          value: "#ffffff",
                        },
                        stop: {
                          value: "#000000",
                        },
                      },
                      radius: 1000,
                    },
                    shadow: {
                      color: {
                        value: "#000000",
                      },
                      length: 2000,
                    },
                  },
                },
              },
              manualParticles: [],
              particles: {
                bounce: {
                  horizontal: {
                    random: {
                      enable: false,
                      minimumValue: 0.1,
                    },
                    value: 1,
                  },
                  vertical: {
                    random: {
                      enable: false,
                      minimumValue: 0.1,
                    },
                    value: 1,
                  },
                },
                collisions: {
                  absorb: {
                    speed: 2,
                  },
                  bounce: {
                    horizontal: {
                      random: {
                        enable: false,
                        minimumValue: 0.1,
                      },
                      value: 1,
                    },
                    vertical: {
                      random: {
                        enable: false,
                        minimumValue: 0.1,
                      },
                      value: 1,
                    },
                  },
                  enable: false,
                  mode: "bounce",
                  overlap: {
                    enable: true,
                    retries: 0,
                  },
                },
                color: {
                  value: "#ffffff",
                  animation: {
                    h: {
                      count: 0,
                      enable: false,
                      offset: 0,
                      speed: 1,
                      decay: 0,
                      sync: true,
                    },
                    s: {
                      count: 0,
                      enable: false,
                      offset: 0,
                      speed: 1,
                      decay: 0,
                      sync: true,
                    },
                    l: {
                      count: 0,
                      enable: false,
                      offset: 0,
                      speed: 1,
                      decay: 0,
                      sync: true,
                    },
                  },
                },
                groups: {},
                move: {
                  angle: {
                    offset: 0,
                    value: 90,
                  },
                  attract: {
                    distance: 200,
                    enable: false,
                    rotate: {
                      x: 600,
                      y: 1200,
                    },
                  },
                  center: {
                    x: 50,
                    y: 50,
                    // "mode": "percent",
                    radius: 0,
                  },
                  decay: 0,
                  distance: {},
                  direction: "none",
                  drift: 0,
                  enable: true,
                  gravity: {
                    acceleration: 9.81,
                    enable: false,
                    inverse: false,
                    maxSpeed: 50,
                  },
                  path: {
                    clamp: true,
                    delay: {
                      random: {
                        enable: false,
                        minimumValue: 0,
                      },
                      value: 0,
                    },
                    enable: false,
                    options: {},
                  },
                  outModes: {
                    default: "out",
                    bottom: "out",
                    left: "out",
                    right: "out",
                    top: "out",
                  },
                  random: false,
                  size: false,
                  speed: 2,
                  spin: {
                    acceleration: 0,
                    enable: false,
                  },
                  straight: false,
                  trail: {
                    enable: false,
                    length: 10,
                    fillColor: {
                      value: "#000000",
                    },
                  },
                  vibrate: false,
                  warp: false,
                },
                number: {
                  density: {
                    enable: true,
                    area: 800,
                    factor: 1000,
                  },
                  limit: 0,
                  value: 40,
                },
                opacity: {
                  random: {
                    enable: true,
                    minimumValue: 0.1,
                  },
                  value: {
                    min: 0.1,
                    max: 1,
                  },
                  animation: {
                    count: 0,
                    enable: true,
                    speed: 1,
                    decay: 0,
                    sync: false,
                    destroy: "none",
                    startValue: "random",
                    minimumValue: 0.2,
                  },
                },
                reduceDuplicates: false,
                shadow: {
                  blur: 0,
                  color: {
                    value: "#000",
                  },
                  enable: false,
                  offset: {
                    x: 0,
                    y: 0,
                  },
                },
                shape: {
                  options: {
                    character: {
                      fill: false,
                      font: "Verdana",
                      style: "",
                      value: "*",
                      weight: "400",
                    },
                    char: {
                      fill: false,
                      font: "Verdana",
                      style: "",
                      value: "*",
                      weight: "400",
                    },
                    polygon: {
                      sides: 5,
                    },
                    star: {
                      sides: 5,
                    },
                    image: [
                      {
                        src: "https://particles.js.org/images/fruits//apple.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//avocado.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//banana.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//berries.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//cherry.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//grapes.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//lemon.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//orange.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//peach.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//pear.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//pepper.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//plum.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//star.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//strawberry.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//watermelon.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//watermelon_slice.png",
                        width: 32,
                        height: 32,
                      },
                    ],
                    images: [
                      {
                        src: "https://particles.js.org/images/fruits//apple.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//avocado.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//banana.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//berries.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//cherry.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//grapes.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//lemon.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//orange.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//peach.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//pear.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//pepper.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//plum.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//star.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//strawberry.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//watermelon.png",
                        width: 32,
                        height: 32,
                      },
                      {
                        src: "https://particles.js.org/images/fruits//watermelon_slice.png",
                        width: 32,
                        height: 32,
                      },
                    ],
                  },
                  type: "image",
                },
                size: {
                  random: {
                    enable: false,
                    minimumValue: 1,
                  },
                  value: 16,
                  animation: {
                    count: 0,
                    enable: false,
                    speed: 40,
                    decay: 0,
                    sync: false,
                    destroy: "none",
                    startValue: "random",
                    minimumValue: 0.1,
                  },
                },
                stroke: {
                  width: 0,
                  color: {
                    value: "#000000",
                    animation: {
                      h: {
                        count: 0,
                        enable: false,
                        offset: 0,
                        speed: 1,
                        decay: 0,
                        sync: true,
                      },
                      s: {
                        count: 0,
                        enable: false,
                        offset: 0,
                        speed: 1,
                        decay: 0,
                        sync: true,
                      },
                      l: {
                        count: 0,
                        enable: false,
                        offset: 0,
                        speed: 1,
                        decay: 0,
                        sync: true,
                      },
                    },
                  },
                },
                zIndex: {
                  random: {
                    enable: false,
                    minimumValue: 0,
                  },
                  value: 0,
                  opacityRate: 1,
                  sizeRate: 1,
                  velocityRate: 1,
                },
                life: {
                  count: 0,
                  delay: {
                    random: {
                      enable: false,
                      minimumValue: 0,
                    },
                    value: 0,
                    sync: false,
                  },
                  duration: {
                    random: {
                      enable: false,
                      minimumValue: 0.0001,
                    },
                    value: 0,
                    sync: false,
                  },
                },
                rotate: {
                  random: {
                    enable: true,
                    minimumValue: 0,
                  },
                  value: 0,
                  animation: {
                    enable: true,
                    speed: 5,
                    decay: 0,
                    sync: false,
                  },
                  direction: "random",
                  path: false,
                },
                destroy: {
                  bounds: {},
                  mode: "none",
                  split: {
                    count: 1,
                    factor: {
                      random: {
                        enable: false,
                        minimumValue: 0,
                      },
                      value: 3,
                    },
                    rate: {
                      random: {
                        enable: false,
                        minimumValue: 0,
                      },
                      value: {
                        min: 4,
                        max: 9,
                      },
                    },
                    sizeOffset: true,
                    particles: {},
                  },
                },
                roll: {
                  darken: {
                    enable: false,
                    value: 0,
                  },
                  enable: false,
                  enlighten: {
                    enable: false,
                    value: 0,
                  },
                  mode: "vertical",
                  speed: 25,
                },
                tilt: {
                  random: {
                    enable: false,
                    minimumValue: 0,
                  },
                  value: 0,
                  animation: {
                    enable: false,
                    speed: 0,
                    decay: 0,
                    sync: false,
                  },
                  direction: "clockwise",
                  enable: false,
                },
                twinkle: {
                  lines: {
                    enable: false,
                    frequency: 0.05,
                    opacity: 1,
                  },
                  particles: {
                    enable: false,
                    frequency: 0.05,
                    opacity: 1,
                  },
                },
                wobble: {
                  distance: 5,
                  enable: false,
                  speed: {
                    angle: 50,
                    move: 10,
                  },
                },
                orbit: {
                  animation: {
                    count: 0,
                    enable: false,
                    speed: 1,
                    decay: 0,
                    sync: false,
                  },
                  enable: false,
                  opacity: 1,
                  rotation: {
                    random: {
                      enable: false,
                      minimumValue: 0,
                    },
                    value: 45,
                  },
                  width: 1,
                },
                links: {
                  blink: false,
                  color: {
                    value: "#000",
                  },
                  consent: false,
                  distance: 150,
                  enable: false,
                  frequency: 1,
                  opacity: 0.4,
                  shadow: {
                    blur: 5,
                    color: {
                      value: "#000",
                    },
                    enable: false,
                  },
                  triangles: {
                    enable: false,
                    frequency: 1,
                  },
                  width: 1,
                  warp: false,
                },
                repulse: {
                  random: {
                    enable: false,
                    minimumValue: 0,
                  },
                  value: 0,
                  enabled: false,
                  distance: 1,
                  duration: 1,
                  factor: 1,
                  speed: 1,
                },
              },
              pauseOnBlur: true,
              pauseOnOutsideViewport: true,
              responsive: [],
              smooth: false,
              style: {},
              themes: [],
              zLayers: 100,
            }}
          />
        </div>
      </Spin>
    </>
  );
};
